<template>
    <div class="layout-container">
        <el-container class="all_box">
            <el-main class="img_box">
                <ImageBox :url="url" :overlayList="overlayList" :currentOverlay="currentOverlay" @overlaysChange="overlaysChangeHandler" />
            </el-main>

            <el-aside class="list_box" width="400px">
                <ListBox :url="url" :overlayList="overlayList" @clickOverlay="clickOverlayHandler" />
            </el-aside>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import ListBox  from "@/views/main/taskManagement/imageOverlays/overlays/listBox/index.vue"
import ImageBox from "@/views/main/taskManagement/imageOverlays/overlays/imageBox/index.vue"
import {ref}    from "vue";

let url = "https://img.zcool.cn/community/018e865e16a3a1a8012165180a1435.jpg@1280w_1l_2o_100sh.jpg"

const currentOverlay = ref("")

const overlayList = ref([])

// 标注改变
function overlaysChangeHandler(allAnnotations: any) {
    let aimData = allAnnotations

    // 增加可视样式
    aimData.forEach((item: any) => {
        const selectorValue         = item.target?.selector?.value
        const regex                 = /xywh=pixel:/i
        const newSelectorValue      = selectorValue.replace(regex, '')
        const newSelectorValueArray = newSelectorValue.split(',')
        item.styleObject = {
            backgroundPositionX: `-${newSelectorValueArray[0]}px`,
            backgroundPositionY: `-${newSelectorValueArray[1]}px`,
            width              : newSelectorValueArray[2] + 'px',
            height             : newSelectorValueArray[3] + 'px',
        }
    })

    aimData.sort((a: any, b: any) => a.index - b.index)

    overlayList.value = aimData
}

// 列表点击
function clickOverlayHandler(value: any) {
    currentOverlay.value = value
}
</script>

<style scoped lang="scss">

.all_box {
    height: 100%;

    .img_box {
        height: 100%;
    }

    .list_box {
        height: 100%;
    }
}

</style>
